<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			html,
			body,
			.mui-content {
				height: 100%;
			}
			
			header.mui-bar.mui-bar-nav {
				z-index: 100;
			}
			
			#player {
				width: 100%;
				height: 35%;
				border: 2px dashed #BBBBBB;
			}
			
			#dataConnected {
				display: none;
				position: relative;
				top: 25%;
			}
			
			.video-info {
				display: none;
			}
			
			form.mui-input-group label {
				width: 30%;
				font-size: 14px;
			}
			
			form.mui-input-group input,
			form.mui-input-group textarea {
				width: 70%;
				font-size: 14px;
			}
			
			form.mui-input-group input#url {
				width: 100%;
			}
			
			form.mui-input-group .textarea {
				height: 90px;
			}
			
			.mui-radio input[type=radio]:checked:before {
				color: #FEB406;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">发布作品</h1>
		</header>
		<div class="mui-content">
			<h5 class="min-title">请输入优酷视频网址</h5>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<input type="text" id="url" class="mui-input-clear mui-input" placeholder="如 http://v.youku.com/v_show/id_123==.html"/>
				</div>
			</form>
			<button class="mui-btn btn-block btn-outlined">预览</button>
			<div id="player">
				<div id="dataConnected" class="mui-text-center">
					<p>正在使用移动网络</p>
					<button class="mui-btn btn-outlined">继续播放</button>
				</div>
			</div>
			<div class="video-info">
				<h5 class="min-title">编辑资料</h5>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>标题</label>
						<input type="text" id='title' class="mui-input-clear mui-input" placeholder="请输入标题">
					</div>
					<div class="mui-input-row">
						<label>类别</label>
						<input type="text" id="category" class="mui-input-clear mui-input" placeholder="如：民歌，(6字之内)" maxlength="6">
					</div>
					<div class="mui-input-row">
						<label>标签</label>
						<input type="text" id="tags" class="mui-input-clear mui-input" placeholder="如：快歌，慢歌，(6字之内)" maxlength="6">
					</div>
					<div class="mui-input-row textarea">
						<label>视频描述</label>
						<textarea rows="3" cols="15" id="description"></textarea>
					</div>
				</form>
				<h5 class="min-title">选择作品类型</h5>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-radio">
						<input name="type" type="radio"><span>小样</span>
					</li>
					<li class="mui-table-view-cell mui-radio">
						<input name="type" type="radio"><span>作品</span>
					</li>
				</ul>
			</div>
			<button class="mui-btn btn-block btn-main" id="release" disabled>发布</button>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/player.youku.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var client_id = 'd4145a875d32d5b5';
			var urlelem = document.getElementById("url");
			var releaseBtn = document.getElementById("release");
			var player = null;
			var queryURL = null; // 查询视频详细信息地址
			var videoInfo = {}; // 上传视频信息
			var videoId; // 优酷视频id
			var netState; // 当前网络状态
			// 数据网络连接提示
			var dataConnected = document.getElementById("dataConnected");
			mui('.mui-scroll-wrapper').scroll();
			// 解析地址，查询视频信息
			mui('.mui-content').on('tap', '.btn-outlined', function() {
				plus.nativeUI.showWaiting('正在查询相关信息，请稍后');
				urlelem.blur();
				var videosrc = urlelem.value;
				console.log(videosrc)
				netState = plus.networkinfo.getCurrentType();
				// 解析视频地址并播放
				if(/.+v.youku.com.+id_([a-zA-Z0-9]+[=]{2})\.html.+/.exec(videosrc)) {
					videoId = RegExp.$1;
					queryURL = 'https://openapi.youku.com/v2/videos/show.json?video_id=' + videoId + '&client_id=' + Common.playerClient_id;
					console.log(queryURL);
					if(netState == 3 || Common.getUniSetting().dataAutoPlay) {
						showVideo(videoId);
					} else {
						$(dataConnected).show();
					}
					// 查询该视频的详细信息
					Common.ajax({
						url : queryURL
					}, function(data) {
						$(".video-info").show();
						console.log(JSON.stringify(data));
						$("#title").val(data.title);
						$("#category").val(data.category);
						$("#tags").val(data.tags);
						$("#description").val(data.description);
						videoInfo.filename = videoId;
						videoInfo.filehome = data.thumbnail;
						$(releaseBtn).prop('disabled', false);
						plus.nativeUI.closeWaiting();
					}, function(xhr) {
						plus.nativeUI.closeWaiting();
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);					
						mui.toast('网络异常，请稍后再试');
					})
				} else {
					mui.toast('解析失败，请输入正确的视频地址');
					urlelem.value = '';
				}
			})
			
			// 使用手机流量播放视频
			mui(dataConnected).on('tap', 'button', function() {
				showVideo(videoId);
				mui.toast('正在使用数据流量播放');
			})
			
			// 连接WIFI后加载视频
			document.addEventListener('netchange', function() {
				netState = plus.networkinfo.getCurrentType();
				if(netState == 3) {
					showVideo(videoId);
				}
			})
			
			// 显示播放器
			function showVideo(id) {
				$(dataConnected).hide();
				var player = new YKU.Player('player', {
					styleid: '0',
					client_id: Common.playerClient_id,
					vid: id,
					newPlayer: true,
					autoplay: false,
					show_related: false
				});
			}
			
			// 发布作品
			mui('.mui-content').on('tap', '.btn-main', function() {
				$("input, textarea").blur();
				if($(".video-info").is(':hidden')) {
					mui.toast('请输入正确的视频网址');
				} else {
					var allRight = true;
					$(".video-info form input,.video-info form textarea").each(function() {
						if(!$(this).val()) {
							allRight = false;
						}
					})
					if(!$("input[type='radio']:checked").length) {
						allRight = false;
					} else {
						var type = $("input[type='radio']:checked").siblings('span').text();
						videoInfo.type = type == '小样' ? 11 : 21;
					}
					if(allRight) {
						videoInfo.demoName = $("#title").val();
						videoInfo.kind = $("#category").val();
						videoInfo.label = $("#tags").val();
						videoInfo.fdesc = $("#description").val().replace(new RegExp('\n', 'gm'), '');
						var postData = Common.toURL(videoInfo).substr(1, Common.toURL(videoInfo).length - 2);
						console.log(postData);
						Common.ajax({
							url : baseURL + 'artistOpus/uploadDemo/new.json',
							type : 'POST',
							data : postData
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast('发布成功');
								mui.fire(plus.webview.currentWebview().opener(), 'reload');
								mui.back();
							} else {
								mui.toast('发布失败，请稍后重试');
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.toast('请输入完整的视频信息后再发布');
					}
				}
			})
		</script>
	</body>

</html>